{% extends 'base.html' %}
{% block title %}首页 - Local Library{% endblock %}
{% block content %}
<div class="dashboard-layout">
    <div class="dashboard-main">
        <div class="welcome-card">
            <h1 style="display:flex;align-items:center;font-size:2rem;"><span style="font-size:2.2rem;margin-right:12px;">📚</span>欢迎来到本地图书馆</h1>
            <div style="color:#666;font-size:1.1rem;margin-bottom:18px;">在这里，你可以浏览图书、查看作者信息，并进行图书借阅。</div>
        </div>
        <div class="stats-row">
            <div class="stat-card">
                <div class="stat-icon" style="background:#2563eb1a;"><span style="font-size:2rem;">📖</span></div>
                <div class="stat-label">图书总数</div>
                <div class="stat-value">{{ num_books }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background:#22c55e1a;"><span style="font-size:2rem;">👤</span></div>
                <div class="stat-label">作者总数</div>
                <div class="stat-value">{{ num_authors }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background:#06b6d41a;"><span style="font-size:2rem;">✅</span></div>
                <div class="stat-label">可借图书</div>
                <div class="stat-value">{{ num_available }}</div>
            </div>
        </div>
        <div class="cards-row">
            <div class="info-card">
                <div class="info-card-title" style="color:#2563eb;"><span style="font-size:1.2rem;">★</span> 热门图书</div>
                {% for book in hot_books %}
                    <div class="info-item">
                        <div><b>{{ book.title }}</b> <span style="color:#888;font-size:0.98rem;">({{ book.author }})</span></div>
                        <div style="font-size:0.95rem;color:#888;">借出次数：{{ book.borrowed_count }}</div>
                    </div>
                {% empty %}
                    <div class="info-item">暂无数据</div>
                {% endfor %}
            </div>
            <div class="info-card">
                <div class="info-card-title" style="color:#16a34a;"><span style="font-size:1.2rem;">☁</span> 知名作者</div>
                {% for author in famous_authors %}
                    <div class="info-item">
                        <div><b>{{ author.last_name }}{{ author.first_name }}</b></div>
                        <div style="font-size:0.95rem;color:#888;">图书数量：{{ author.book_count }}</div>
                        <div style="font-size:0.95rem;color:#888;">{{ author.date_of_birth }}{% if author.date_of_death %} - {{ author.date_of_death }}{% endif %}</div>
                    </div>
                {% empty %}
                    <div class="info-item">暂无数据</div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="dashboard-side">
        <div class="side-card">
            <div class="side-title">快捷导航</div>
            <ul class="side-nav">
                <li><a href="{% url 'my-borrowed' %}">📚 我的借阅</a></li>
                <li><a href="{% url 'my-loan-history' %}">🕓 借阅历史</a></li>
                <li><a href="{% url 'authors' %}">👤 作者列表</a></li>
                <li><a href="{% url 'all-borrowed' %}">📖 借出图书</a></li>
            </ul>
        </div>
        <div class="side-card">
            <div class="side-title">访问计数器</div>
            <div class="counter" style="margin:0;">您已访问本页面 {{ num_visits }} 次。</div>
        </div>
    </div>
</div>
{% endblock %} 